<div class="-ml-1!" x-data="{ show_notes_{{ loop_id }}: false }">
    <div class="flex flex-row pt-1 {% if layout == 'Grid' %} min-h-36 -mb-1! {% endif %}"
         x-data="{ tooltip_date: false }">
        <div id="thumbnail-{{ loop_id }}" class="[&>div]:cursor-pointer"
             @click="window.open('{% url 'view_pdf' pdf.id %}', '_self');">
            {% if pdf.thumbnail %}
            <div class="w-26!">
                <img class="rounded-md border-[1px] border-slate-200 dark:border-slate-600 creme:border-stone-400"
                   src="{% url 'serve_thumbnail' pdf.id %}"/>
            </div>
            {% else %}
            <div class="flex items-center justify-center !rounded-md border-[1px] w-26! h-33!
                        border-slate-200 !bg-slate-100 text-slate-700
                        dark:border-slate-600 dark:!bg-slate-700 dark:text-slate-200
                        creme:border-stone-400 creme:!bg-creme-light creme:text-stone-400">
                <svg class="w-10! h-10! py-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
                  <!-- source: https://www.svgrepo.com/svg/489003/image -->
                  <!-- license: PD License -->
                    <path d="M4 17L7.58959 13.7694C8.38025 13.0578 9.58958 13.0896 10.3417 13.8417L11.5 15L15.0858 11.4142C15.8668 10.6332 17.1332 10.6332 17.9142 11.4142L20 13.5M11 9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9ZM6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            {% endif %}
        </div>
        <div class="truncate w-full flex flex-col pl-3 md:pl-5 text-sm text-slate-700 dark:text-slate-200 creme:text-stone-700">
            <div class="flex flex-row justify-between relative -mb-1
                        text-slate-400 dark:text-slate-500 creme:text-stone-500">
                <div>
                    <span x-on:mouseenter="tooltip_date = true" x-on:mouseleave="tooltip_date = false">
                        {% if pdf.natural_age == 'now' %}
                        {{ pdf.natural_age }}
                        {% else %}
                        {{ pdf.natural_age }} ago
                        {% endif %}
                    </span>
                    <span x-show="tooltip_date" x-transition:enter.duration.500ms x-cloak
                          class="left-0 -bottom-10 z-50 absolute bg-primary text-slate-200 rounded-xs p-2 mt-1">
                      {{ pdf.creation_date }} UTC
                    </span>
                </div>
                {% include 'includes/pdf_overview/pdf_interactions.html' %}
            </div>
            <div class="flex flex-row items-center gap-x-2">
                <a id="pdf-link-{{ loop_id }}"
                   href="{% url 'view_pdf' pdf.id %}"
                   class="text-xl! font-bold truncate
                          hover:text-slate-900 dark:hover:text-white creme:hover:text-stone-900">
                    {{ pdf.name }}
                </a>
                {% if pdf.starred %}
                <div>
                    <svg id="starred-icon-{{ loop_id }}" class="w-5 h-5 fill-primary text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- source: https://www.svgrepo.com/svg/471930/star-01 -->
                        <!-- license: CC0 License-->
                        <path d="M11.2827 3.45332C11.5131 2.98638 11.6284 2.75291 11.7848 2.67831C11.9209 2.61341 12.0791 2.61341 12.2152 2.67831C12.3717 2.75291 12.4869 2.98638 12.7174 3.45332L14.9041 7.88328C14.9721 8.02113 15.0061 8.09006 15.0558 8.14358C15.0999 8.19096 15.1527 8.22935 15.2113 8.25662C15.2776 8.28742 15.3536 8.29854 15.5057 8.32077L20.397 9.03571C20.9121 9.11099 21.1696 9.14863 21.2888 9.27444C21.3925 9.38389 21.4412 9.5343 21.4215 9.68377C21.3988 9.85558 21.2124 10.0372 20.8395 10.4004L17.3014 13.8464C17.1912 13.9538 17.136 14.0076 17.1004 14.0715C17.0689 14.128 17.0487 14.1902 17.0409 14.2545C17.0321 14.3271 17.0451 14.403 17.0711 14.5547L17.906 19.4221C17.994 19.9355 18.038 20.1922 17.9553 20.3445C17.8833 20.477 17.7554 20.57 17.6071 20.5975C17.4366 20.6291 17.2061 20.5078 16.7451 20.2654L12.3724 17.9658C12.2361 17.8942 12.168 17.8584 12.0962 17.8443C12.0327 17.8318 11.9673 17.8318 11.9038 17.8443C11.832 17.8584 11.7639 17.8942 11.6277 17.9658L7.25492 20.2654C6.79392 20.5078 6.56341 20.6291 6.39297 20.5975C6.24468 20.57 6.11672 20.477 6.04474 20.3445C5.962 20.1922 6.00603 19.9355 6.09407 19.4221L6.92889 14.5547C6.95491 14.403 6.96793 14.3271 6.95912 14.2545C6.95132 14.1902 6.93111 14.128 6.89961 14.0715C6.86402 14.0076 6.80888 13.9538 6.69859 13.8464L3.16056 10.4004C2.78766 10.0372 2.60121 9.85558 2.57853 9.68377C2.55879 9.5343 2.60755 9.38389 2.71125 9.27444C2.83044 9.14863 3.08797 9.11099 3.60304 9.03571L8.49431 8.32077C8.64642 8.29854 8.72248 8.28742 8.78872 8.25662C8.84736 8.22935 8.90016 8.19096 8.94419 8.14358C8.99391 8.09006 9.02793 8.02113 9.09597 7.88328L11.2827 3.45332Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                {% endif %}
            </div>
            {% if pdf.description %}
            <div class="truncate">
                <span class="truncate">{{ pdf.description }}</span>
            </div>
            {% endif %}
            <div>
                {% if pdf.views == 1 %}
                <span class="truncate">1 View</span>
                {% else %}
                <span class="truncate">{{ pdf.views }} Views</span>
                {% endif %}
            </div>
            {% if pdf.number_of_pages > 0 %}
            <div class="pb-1">
                <span class="truncate"> {{ pdf.progress }}% - Page {{ pdf.current_page_for_progress }} of {{ pdf.number_of_pages }}</span>
            </div>
            {% endif %}
            {% if pdf.tags.all %}
            <div class="truncate md:text-base pb-1">
                {% for tag in pdf.tags.all|dictsort:"name" %}
                <a href="{% url 'pdf_overview_query' %}?search=%23{{ tag.name }}"
                   class="rounded-sm hover:bg-slate-200 dark:hover:bg-slate-700 creme:hover:bg-creme-dark px-[2px] md:px-[4px]
                          border border-slate-200 dark:border-slate-700 creme:border-creme-dark mr-[2px] md:mr-[4px]">
                    <span class="text-primary">#</span>{{ tag.name }}
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
    <div id="notes-{{ loop_id }}" x-show="show_notes_{{ loop_id }}" x-cloak>
    </div>
</div>
